<!DOCTYPE HTML>
<html>
<head>
    <title>管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #panel {
            position: absolute;
            top: 30px;
            left: 10px;
            z-index: 999;
            color: #fff;
        }

        #login {
            position: absolute;
            width: 300px;
            height: 40px;
            left: 50%;
            top: 50%;
            margin: -40px 0 0 -150px;
        }

        #login input[type=password] {
            width: 200px;
            height: 30px;
            padding: 3px;
            line-height: 30px;
            border: 1px solid #000;
        }

        #login input[type=submit] {
            width: 80px;
            height: 38px;
            display: inline-block;
            line-height: 38px;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=ZL48IBPe27nmxESdlFW0UQ4FTqb4OByx"></script>
    <script th:src="@{/js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{css/bootstrap.css}">
    <script th:src="@{js/bootstrap.js}"></script>
</head>
<body>

<div id="map"></div>
<script type="text/javascript">
    var map = new BMap.Map("map", {enableMapClick:false});                        // 创建Map实例
    map.centerAndZoom(new BMap.Point(118.10314, 24.573384), 17);     // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();                        //启用滚轮放大缩小
    var points = [];  // 添加海量点数据
    //$.ajaxSettings.async = false;
    $.get('/data/getAll', function (data) {
        all_data = data.data;
        for (let i = 0; i < all_data.length; i++) {
            arr = all_data[i].attributes.coordinate.split(",");
            var point = new BMap.Point(arr[0], arr[1]);
            point.address = all_data[i].attributes.address;
            point.data = all_data[i].attributes.data;
            points.push(point);
        }
        var options = {
            size: BMAP_POINT_SIZE_HUGE,
            shape: BMAP_POINT_SHAPE_STAR,
            color: '#000000'
        }
        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
        pointCollection.addEventListener('click', function (e) {
            var point = new BMap.Point(e.point.lng, e.point.lat);
            var opts = {
                title: "垃圾桶详情：",
                enableMessage: false,
            }
            var infowindow = new BMap.InfoWindow("地址："+e.point.address+"<br>剩余容量："+e.point.data+"%<br>经纬度" + "<br/>lng：" + e.point.lng + "<br/>lat：" + e.point.lat, opts);
            map.openInfoWindow(infowindow, point);
        });
        map.addOverlay(pointCollection);  // 添加Overlay
    });

</script>

</body>
</html>

